<template>
  <div class="base">
    <!-- 顶部提示栏 -->
    <div class="btn_wrapper">
      <span>说明:目前支持学科和关键字条件筛选</span>
      <el-button
        type="success"
        icon="el-icon-edit"
        size="small"
        style="float: right"
        @click="$router.push('/questions/new')"
        >新增试题</el-button
      >
    </div>
    <!-- form表单搜索栏 -->
    <el-form class="search-form" ref="titleForm" label-width="80px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="学科">
            <el-select
              style="width: 100%"
              v-model="form.subjectID"
              placeholder="请选择"
              @change="changeFn"
            >
              <el-option
                v-for="item in subjectsList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二级目录">
            <el-select
              style="width: 100%"
              v-model="form.catalogID"
              placeholder="请选择"
            >
              <el-option
                v-for="item in muluList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签">
            <el-select
              style="width: 100%"
              v-model="form.tags"
              placeholder="请选择"
            >
              <el-option
                v-for="item in tagList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字">
            <el-input
              v-model="form.keyword"
              placeholder="根据题干搜索"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="试题类型">
            <el-select
              style="width: 100%"
              v-model.number="form.questionType"
              placeholder="请选择"
            >
              <el-option label="单选" value="1"></el-option>
              <el-option label="多选" value="2"></el-option>
              <el-option label="简答" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="难度">
            <el-select
              style="width: 100%"
              v-model.number="form.difficulty"
              placeholder="请选择"
            >
              <el-option label="简单" value="1"></el-option>
              <el-option label="一般" value="2"></el-option>
              <el-option label="困难" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="方向">
            <el-select
              style="width: 100%"
              v-model="form.direction"
              placeholder="请选择"
            >
              <el-option value="o2o"></el-option>
              <el-option value="外包服务"></el-option>
              <el-option value="企业服务"></el-option>
              <el-option value="互联网金融"></el-option>
              <el-option value="企业咨询"></el-option>
              <el-option value="互联网"></el-option>
              <el-option value="电子商务"></el-option>
              <el-option value="其他"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人">
            <el-select
              style="width: 100%"
              v-model="form.creatorID"
              placeholder="请选择"
            >
              <el-option
                v-for="item in userList"
                :key="item.id"
                :label="item.username"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="题目备注">
            <el-input v-model="form.remarks"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称">
            <el-input v-model="form.shortName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="城市">
            <div class="citySelect">
              <el-select
                v-model="form.province"
                placeholder="请选择"
                @change="chooseQu"
              >
                <el-option v-for="item in cityList" :key="item" :value="item">
                </el-option>
              </el-select>
              <el-select v-model="form.city" filterable placeholder="请选择">
                <el-option v-for="item in quList" :key="item" :value="item">
                </el-option>
              </el-select>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="6" class="last">
          <el-button size="small" @click="clearForm">清除</el-button>
          <el-button size="small" type="primary" @click="searchFn"
            >搜索</el-button
          >
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects'
import { simple as simpleMulu } from '@/api/hmmm/directorys'
import { simple as simpleTags } from '@/api/hmmm/tags'
import { list } from '@/api/base/users'
import { provinces, citys } from '@/api/hmmm/citys'
import { list as searchReq } from '@/api/hmmm/questions'
export default {
  name: 'BaseTitle',
  props: {
    form: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      subjectsList: [],
      muluList: [],
      tagList: [],
      userList: [],
      cityList: [],
      quList: [],
      value: '',
      valueQu: ''
    }
  },

  created () {
    this.loadSubjects()
  },

  methods: {
    async loadSubjects () {
      const res = await simple()
      console.log(111, res)
      this.subjectsList = res.data
      // 获取用户列表
      const res3 = await list()
      console.log(112, res3)
      this.userList = res3.data.list
      this.cityList = provinces()
    },
    async changeFn () {
      const res = await simpleMulu(this.form.subjectID)
      // console.log(res)
      this.muluList = res.data
      const res2 = await simpleTags(this.form.subjectID)
      // console.log(112, res2)
      this.tagList = res2.data
    },
    // 选择城市后获取区域123213
    chooseQu (val) {
      console.log(val)
      this.quList = citys(val)
    },
    // 点击清除按钮清除表单
    clearForm () {
      this.$emit('clearForm')
    },
    // 点击搜索功能
    async searchFn () {
      this.form.page = 1
      const res = await searchReq(this.form)
      console.log(444, res)
      this.$emit('searchRes', res.data)
    }
  }
}
</script>

<style scoped lang="less">
.base {
  .btn_wrapper {
    width: 100%;
    span {
      font-size: 12px;
      color: pink;
    }
  }
  .search-form {
    margin-top: 30px;
    .last {
      display: flex;
      justify-content: end;
    }
  }
  .citySelect {
    display: flex;
  }
}
</style>
